<template>
  <view class="whe_maxv_view">
    <view class="pad_20 boxs">
      <view class="wh_f pad_10_0 bor_b_hui">
        <view class="flex_1 wz_jz">
          <view v-if="!form.wx_head" class="disp bor_255"
                style="border: 2px solid #d5d8d5;width: 110px;height: 110px;background-color: #f1f4f4">
            <view class="he_max jz_flex">
              <img class="bor_255" v-if="!form.wx_head" @click="adduserImg" :src="avatarUrl"  style="width:110px; height:110px;"/>
            </view>
          </view>
          <img v-if="form.wx_head" @click="adduserImg" class="xyy bor_255" :src="form.wx_head"  style="width:100px; height:100px;"/>
<!--          <img v-if="!form.wx_head" @click="adduserImg" class="xyy bor_255" :src="avatarUrl"  style="width:100px; height:100px;"/>-->
          <!--          <img @click="getAvatar" class="xyy bor_255" src="../../static/img/wdl.png"  style="width:100px; height:100px;"/>-->
        </view>
      </view>
      <view class="wh_f pad_10_0 bor_b_hui">
        <view style="width: 120px">
          <text style="margin-left: 10px">昵称:</text>
        </view>
        <view class="flex_1">
          <up-input
              v-model="form.nick_name"
              placeholder="请输入姓名"
              border="none"
          ></up-input>
        </view>
      </view>
<!--      <view class="wh_f pad_10_0 bor_b_hui">-->
<!--        <view style="width: 120px">-->
<!--          <text style="margin-left: 10px">真实姓名:</text>-->
<!--        </view>-->
<!--        <view class="flex_1">-->
<!--          <up-input-->
<!--              v-model="form.real_name"-->
<!--              placeholder="请输入姓名"-->
<!--              border="none"-->
<!--          ></up-input>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="wh_f pad_10_0 bor_b_hui">-->
<!--        <view style="width: 120px">-->
<!--          <text class="wz_red"></text> <text style="margin-left: 10px"> 身份证:</text>-->
<!--        </view>-->
<!--        <view class="flex_1">-->
<!--          <up-input-->
<!--              v-model="form.id_card"-->
<!--              placeholder="请输入身份证"-->
<!--              border="none"-->
<!--          ></up-input></view>-->
<!--      </view>-->
      <view class="wh_f pad_10_0 bor_b_hui">
        <view style="width: 120px">
          <text class="wz_red">* </text><text>户籍地址:</text>
        </view>
        <view class="flex_1">
          <view class="wh_max"  @click="show=true">
            <text v-if="form.town_id">{{ addresstext }}</text>
          </view>
        </view>
      </view>
      <view class="wh_f pad_10_0 bor_b_hui">
        <view style="width: 120px">
          <text class="wz_red">* </text><text>+86:</text>
        </view>
        <view class="flex_1">
          <up-input
              v-model="form.phone"
              placeholder="请输入手机号"
              border="none"
          ></up-input>
        </view>
      </view>

      <!--      粘贴并识别地址-->
      <view class="pad_10_0 boxs">
        <view class="pad_20 boxs bor_10 wh_f_l" style="background-color: #f5f5f5">
          <view class="czjz_flex">
            <up-input
                v-model="form.verify_code"
                class="ba_gr wh_max"
                border="none"
                placeholder="请输入验证码"
            ></up-input>
          </view>
          <view class="wz_rigdq fz_14">
            <text class="bor_25" @click="yzm" style="padding: 5px 10px;border: 1px solid #3a9e5f;color: #3a9e5f">
              <text v-if="num === 60">验证码</text>
              <text v-if="num !==60">{{ num }}</text>
            </text>
          </view>
        </view>
      </view>
      <up-form v-if="false"
          labelPosition="left"
          :model="form"
          :rules="rules"
          ref="form"
          labelWidth="130"
          labelAlign="left"
      >
        <up-form-item
            class="ba_gr"
            label="真实姓名:"
            prop="userInfo"
            :borderBottom="true"
            ref="item1"
        >
          <up-input
              v-model="form.real_name"
              border="none"
          ></up-input>
        </up-form-item>
        <up-form-item
            label="身份证:"
            prop="userInfo"
            :borderBottom="true"
            ref="item1"
        >
          <up-input
              v-model="form.id_card"
              border="none"
          ></up-input>
        </up-form-item>
        <up-form-item
            label="户籍地址:"
            prop="town_id"
            :borderBottom="true"
            ref="item1"
        >
           <view class="wh_max"  @click="show=true">
             <text v-if="form.town_id">{{ addresstext }}</text>
           </view>
        </up-form-item>
        <up-form-item
            label="+86:"
            prop="phone"
            style="position: relative"
            :borderBottom="true"
        >
          <up-input
              v-model="form.phone"
              border="none"
          ></up-input>
        </up-form-item>
        <!--      粘贴并识别地址-->
        <view class="pad_10_0 boxs">
          <view class="pad_20 boxs bor_10 wh_f_l" style="background-color: #f5f5f5">
            <view class="czjz_flex">
              <up-input
                  v-model="form.verify_code"
                  class="ba_gr wh_max"
                  border="none"
                  placeholder="请输入验证码"
              ></up-input>
            </view>
            <view class="wz_rigdq fz_14">
              <text class="bor_25" @click="yzm" style="padding: 5px 10px;border: 1px solid #3a9e5f;color: #3a9e5f">
                <text v-if="num === 60">验证码</text>
                <text v-if="num !==60">{{ num }}</text>
              </text>
            </view>
          </view>
        </view>
      </up-form>
    </view>
    <view class="pm boxs" style=" padding: 0 10px 20px;width: 100%;height:60px;left: 0;bottom: 0">
      <view @click="submitOrder" class="jz_flex wz_white bor_25 mag_r-10"
            style="background-color: #3a9e5f;height: 40px">
        <text>确认修改</text>
      </view>
    </view>
<!--    <up-picker :show="show" :columns="array"></up-picker>-->
    <up-picker v-model="form.town_id"
               class="ba_gr"
               :show = "show"
               @cancel="show = false"
               @confirm="confirm"
               :columns="villageList"
               keyName="name"></up-picker>
<!--    <up-picker :show="show" :columns="array" keyName="name"></up-picker>-->
    <up-toast ref="uToastRef"></up-toast>

  </view>
</template>
<script>
import {getBlockByPid, getUserInfo, sendVerifyCode, setMobile} from "../../Api/user";
import {uploadImages, userCenter} from "../../Api/shop";

export default {
  name: "index",
  data(){
    return{
      form:{},
      show:false,
      avatarUrl:'https://xdjzapi.towngo.cn/uploads/images/wx/202508/24/xcx_1756029474_yaWYmwzZBt.jpg',
      rules: {
        phone: {
          required: true,
          message: '请输入手机号',
          trigger: ['blur', 'change']
        }
      },
      text:'验证码',
      addresstext:'请选择地址',
      num: 60,          // 定时器开始的秒数
      isCounting: false, // 是否正在计时
      timer: null,       // 定时器ID
      villageList:[[]],
      columns: [[]],
      array: ['选项1', '选项2', '选项3'],
    }
  },
  onLoad(){
    //获取个人资料
    getUserInfo().then(res => {
      this.form = res.data
      getBlockByPid().then(res => {
        this.villageList[0] = res.data
        let add = res.data.find(item => item.id === this.form.town_id)?.name
        if(add){
          this.addresstext = add
        }
      })
    })
  },
  onShow(){
  },
  methods:{
    //选择头像
    adduserImg(){
      uni.showModal({
        title: '提示',
        content: '修改头像',
        success: (m) => {
          if (m.confirm) {
            uni.chooseImage({
              count: 1,
              sizeType: ['compressed'],
              success: (img) => {
                console.log(456,img.tempFilePaths)
                uni.uploadFile({
                  url: 'https://xdjzapi.towngo.cn/api/v1/image/uploadImages',
                  filePath: img.tempFilePaths[0],
                  name: 'file',
                  formData: {
                    'folder': 'xcx'
                  },
                  header: {
                    'Authorization': 'Bearer ' + uni.getStorageSync('userToken')
                  },
                  success: (res) => {
                    let data = JSON.parse((res.data))
                    let image = data.data
                    userCenter({
                      head_image: image
                    }).then(res => {
                      this.form.wx_head = data.data
                      uni.showToast({
                        title: '修改成功',
                        icon: 'none'
                      })
                      this.getUserInfoDetail()
                    })
                  }
                })
              }
            })
          }
        }
      })
    },
    getUserInfoDetail(){
      //获取个人资料
      getUserInfo().then(res => {
        this.form = res.data
        getBlockByPid().then(res => {
          this.villageList[0] = res.data
          let add = res.data.find(item => item.id === this.form.town_id)?.name
          if(add){
            this.addresstext = add
          }
        })
      })
    },






    // 获取临时头像
    getAvatar(e){
      this.avatarUrl = e.detail.avatarUrl;
      this.downloadAvatar(this.avatarUrl); // 下载头像
      console.log(111,e)
    },
    // 下载临时头像
    downloadAvatar(tempUrl) {
      uni.downloadFile({
        url: tempUrl,
        success: (downloadFileRes) => {
          if (downloadFileRes.statusCode === 200) {
            console.log("798",downloadFileRes)
            this.uploadAvatar(downloadFileRes.tempFilePath); // 上传下载的头像
          } else {
            console.error('下载头像失败', downloadFileRes);
          }
        },
        fail: (err) => {
          console.error('下载失败', err);
        }
      });
    },
    // 上传头像
    uploadAvatar(filePath){
      uploadImages({
        file:filePath
      }).then(res=>{
        console.log(999,res)
      })
    },
    chooseImage() {
      uni.chooseImage({
        count: 1, // 默认选择一张图片
        success: (res) => {
          console.log(111,res)
          this.avatarUrl = res.tempFilePaths[0]; // 获取选择的图片
        },
        fail: (err) => {
          console.error('选择图片失败', err);
        }
      });
    },
    //消息提示
    showToast(msg, type = "default") {
      uni.showToast({
        title: msg,
        icon: "none", // 图标类型，可选值：success, none
        duration: 2000 // 显示时间，单位毫秒
      });
      // 设置半秒后自动隐藏提示
      // setTimeout(() => {
      //   this.$refs.uToastRef.hide(); // 这里假设有一个 hide 方法来隐藏提示
      // }, 500);
    },
    // 确认地址
    confirm(e){
      console.log(e)
      this.form.town_id = e.value[0].id
      this.addresstext = e.value[0].name
      this.show = false
    },
    // 获取验证码
    yzm(){
      const phonePattern = /^1[3-9]\d{9}$/; // 正则表达式
      if(phonePattern.test(this.form.phone)){
        if (this.isCounting) return; // 防止重复点击
        this.isCounting = true; // 开始计时
        sendVerifyCode({
          phone:this.form.phone
        }).then(res => {
          // 设置定时器
          this.timer = setInterval(() => {
            if (this.num > 0) {
              this.num -= 1; // 每秒减少1
            } else {
              clearInterval(this.timer); // 清理定时器
              this.isCounting = false; // 重置计时状态
              this.num = 60;
            }
          }, 1000);
        })
      }else{
        this.showToast('请输入完整的手机号')
      }
    },
    // 修改资料
    submitOrder(){
      setMobile({
        nick_name:this.form.nick_name,
        town_id:this.form.town_id,
        phone:this.form.phone,
        verify_code:this.form.verify_code
      }).then(res=>{
        if(res.success){
          this.showToast('修改成功!')
          setTimeout(()=>{
            uni.navigateBack({
              delta: 1  // delta 表示返回的页面数，1 表示返回上一页
            })
          },1000)
        }

      })
    }
  }
}
</script>
<style scoped lang="scss">

</style>
